<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        .bdRed {
            background: red;
        }

        .nav-ul-right {
            min-width: 250px;
        }

        #slide_left {
            margin-top: 51px;
        }

        @media (min-width: 768px) {
            #slide_left {
                width: 235px;
                height: 900px;
                position: absolute;
            }
            .page_main{
                margin-left: 236px;
            }
            .my_nav{
                margin-bottom: 0px!important;
            }
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse my_nav">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#slide_left">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">网站后台管理</a>
    </div>
    <ul class="nav navbar-nav navbar-right nav-ul-right">
        <li class="col-xs-6"><a href="#"><span class="badge bdRed">23</span></a></li>
        <li class="col-xs-6"><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</a></li>
    </ul>
    <!--侧边栏-->
    <div class="navbar-default navbar-collapse" id="slide_left">
        <ul class="nav">
            <li>
                <a href="#menu1" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
                <ul id="menu1" class="nav collapse">
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>日志信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>管理员信息</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<!--内容区域-->
<div class="page_main" id="page_main">
    <ol class="breadcrumb">
        <li><a href="#">系统功能</a></li>
        <li class="active">日志信息</li>
    </ol>
</div>
</body>
</html>